<template>
  <div class="header-container">
    <div class="box">
      <img class="user-icon" src="/static/img/ic_user@2x.png"/>
      <div>
        <p class="user-txt level" v-if="this.token">普通用户</p>
        <p class="user-txt" v-if="this.token">{{userTel}}</p>
        <p class="user-txt" v-if="!this.token"><router-link to="/login">登录&nbsp;|&nbsp;注册</router-link></p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Header',
  computed: {
    ...mapState({
      userTel: 'userTel',
      token: 'token'
    })
  },
  data () {
    return {
      userInfo: {
        phoneNumber: '13679797979'
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  .header-container
    width :100%
    height :21%
    background :url("/static/img/my_bg@2x.png") no-repeat
    background-size :100% 100%
    position relative
    .box
      position absolute
      top 50%
      transform translateY(-50%)
      display :flex
      align-items center
      .user-icon
        height :1.2rem
        width :1.2rem
        margin-left .4rem
      .user-txt
        margin-left .3rem
        font-size .34rem
        color #FFFBFB
        &.level
          margin-bottom .1rem
          font-weight bold
          font-size .38rem
        a
          color #FFFBFB
        .user-v-icon
          width .2rem
          height .2rem
          background url("/static/img/v@2x.png")no-repeat
          background-size 100%
          display block



</style>
